<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_bind</title>
</head>
<style>
    .active {
        color: pink;
    }

    .line {
        color: green;
    }
    .deafult {
        color: purple;
    }
</style>
<body>
    <div id="app">
        <h3 v-bind:class="classOne">我是通过vue的方式渲染样式的--1</h3>
        <h3 v-bind:class="{active:isActive,line:isLine}">我是通过vue的方式渲染样式的--2</h3>
        <!-- 需求:点击按钮实现类名的切换 -->
        <button v-on:click="switchClass()">改变下面文本的颜色样式</button>
        <h3 v-bind:class="{deafult: isDefault,active:isActive}">我能通过按钮点击切换颜色</h3>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            classOne: 'active',
            isActive: false,
            isLine: true,
            isDefault: true
        },
        methods: {
            switchClass(){
                this.isDefault = !this.isDefault
                this.isActive = !this.isActive
            }
        }
    })
</script>
</html>